<template>
  <ul>
    <li v-for=" nav in navsLists" :key="nav.id">
      <span>{{ nav.title }}</span>
      <span>{{ nav.desc }}</span>
      <img :src="imgBaseUrl + nav.img" alt="">
    </li>
  </ul>
</template>
<script setup>

import { ref } from 'vue';

import { getNavsApi } from '../api/home';

const imgBaseUrl = process.env.VUE_APP_IMG_BASE_URL;

const navsLists = ref([]);
async function getNavs() {
  const { data } = await getNavsApi();
  navsLists.value = data;
}

getNavs();
</script>

<style lang="scss" scoped>
ul {
  display: flex;

  li {
    border: solid
  }
}
</style>
